<template>
    <div class="Learn">
        <!--头-->
        <Top>
            <ul class="TopTab clearfix" slot="midPart">
                <li :class="{on:checked===1}" @click="checked=1;$router.push('/learn/commend')">推荐课程</li>
                <li :class="{on:checked===2}" @click="myLesson()">系列课程</li>
            </ul>
            <i 
               v-if="inApp()"
               class="el-icon-arrow-left back" 
               slot="leftPart" 
               @click="appBack()"></i>
        </Top>
        <!--中-->
        <router-view></router-view> 
        <!-- 尾  底部导航-->
        <Tabbar :data="{index:2}"></Tabbar>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import Tabbar from '@/components/smallCom/Tabbar'
    export default {
        name: 'Learn',
        components: {
            Top,//顶部信息组件
            Tabbar,//底部导航组件
        },
        data () {
            return {
                checked:1,//顶部 推荐 已购切换
            }
        },
        created(){
            this.checked = this.$route.path==='/learn/commend' || this.$route.path==='/learn'?1:2;
        },
        methods:{
            //已购课程
            myLesson(){
                this.checked = 2
                this.getMemberId() === 0?this.$router.push('/learn/loginTip'):this.$router.push('/learn/order')
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Learn {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*公共头部 异处*/
        .TopTab{
            border: 1px solid #fff;
            display: inline-block;
            border-radius: .06rem;
            overflow: hidden;
            position: absolute;
            left: calc(50% - 1.54rem);
            top: calc(50% - .3rem);
            li{
                width: 1.54rem;
                height: .6rem;
                line-height: .6rem;
                text-align: center;
                float: left;
                color: #fff;
                &.on{
                    background-color: #fff;
                    color: #e7470e;
                }
            }
        }
    }
</style>
